<template>
  <div class="app-main">
    <el-row class="w-wrap-inner">
      <el-col :span="4">
        <div class="menu">
          <first-menu></first-menu>
        </div>
      </el-col>
      <el-col :span="16" class="c-top">
        <div class="pic1">
          <my-carousel></my-carousel>
        </div>
      </el-col>
      <el-col :span="4" class="c-top">
        <div class="pic2">
          <my-pictures></my-pictures>
        </div>
      </el-col>
      <!-- <el-col :span="4" class="c-top">
        <div class="pic3">
          <my-info></my-info>
        </div>
      </el-col>-->
    </el-row>
    <el-row v-for="(rowsp,i) in rowList" :key="i" class="rowsp">
      <el-row>
        <el-col :span="2">
          <a target="_blank" href="#/splist">
            <h5>{{rowsp.title}}</h5>
          </a>
        </el-col>
        <el-col :span="22">
          <a target="_blank" href="#/splist">
            <div
              :class="{xbt:true,'txt-purple':j==dcType[i]}"
              v-for="(type,j) in rowsp.typeList"
              :key="type.name+j"
              @mouseover="onTypeMouserOver(i,j)"
            >{{type.name}}</div>
          </a>
        </el-col>
      </el-row>
      <div class="piclist">
        <div v-for="(pic,k) in rowList[i].spList" :key="pic+k" class="pic">
          <img v-lazy="pic" width="280" height="300" />
        </div>
      </div>
    </el-row>
  </div>
</template>

<script>
import firstMenu from "./menurow/menu";
import myCarousel from "./menurow/carousel";
import myPictures from "./menurow/pictures";
import myInfo from "./menurow/information";
export default {
  components: { firstMenu, myCarousel, myPictures, myInfo },
  data() {
    return {
      dcType: [], //记录每行的当前小标题
      rowList: [
        {
          title: "活动商品",
          spList: [], //该行当前显示的图片列表，默认为该行第一类的typeList[0].list
          typeList: [
            {
              name: "卫浴洁具",
              list: [
                "http://api.yfdmcw.com/uploads/products/2019-10-24/58083e336a5a0433888b4513c2128e4c.png",
                "http://api.yfdmcw.com/uploads/products/287/icon/3/e0694bc155b3fb196b75d7fb1b1ad2a1.png",
                "http://api.yfdmcw.com/uploads/products/2019-10-24/58083e336a5a0433888b4513c2128e4c.png",
                "http://api.yfdmcw.com/uploads/products/287/icon/3/e0694bc155b3fb196b75d7fb1b1ad2a1.png"
              ]
            },
            {
              name: "运动户外",
              list: [
                "http://api.yfdmcw.com/uploads/products/2019-10-11/3/6b3aababb403dcbc830c79421e61de3d.png",
                "http://api.yfdmcw.com/uploads/products/2019-08-07/3/82086a2f61993b145d9fcdb410b89ffa.png",
                "http://api.yfdmcw.com/uploads/products/2019-08-07/3/b158a7e92a75f2152256fe0fe3816610.png",
                "http://api.yfdmcw.com/uploads/products/1168/icon/3/2054b39918698f4b9935bcc198620f07.png"
              ]
            },
            {
              name: "家居百货",
              list: [
                "http://api.yfdmcw.com/uploads/products/2019-09-30/3/2d9fb8f3c4476c9902004ba32c290c81.jpg",
                "http://api.yfdmcw.com/uploads/products/2019-09-27/3/df5da8c974b8dbb1b4081e4cf148a47a.jpg",
                "http://api.yfdmcw.com/uploads/products/2019-08-02/3/8f1cc675b59c1b7de615c7ca33945400.jpg",
                "http://api.yfdmcw.com/uploads/products/726/icon/3/c8a2085328094e934dbfad0983f48e11.jpg"
              ]
            }
          ]
        },
        {
          title: "推荐商品",
          spList: [], //该行当前显示的图片列表，默认为该行第一类的typeList[0].list
          typeList: [
            {
              name: "数码智能",
              list: [
                "http://api.yfdmcw.com/uploads/products/2019-10-24/3/6cfc21c107eb8c1a56744a36e1608b4d.png",
                "http://api.yfdmcw.com/uploads/products/2019-09-24/3/2c3df9563fe8e6c398b9174343532b71.png",
                "http://api.yfdmcw.com/uploads/products/2019-09-20/3/d18c0ee301aeffeb5a7fdc744f5b2ace.jpg",
                "http://api.yfdmcw.com/uploads/products/2019-09-20/3/3e085ca0050e653c249e2f4435063d35.jpg"
              ]
            },
            {
              name: "运动户外",
              list: [
                "http://api.yfdmcw.com/uploads/products/2019-10-11/3/6b3aababb403dcbc830c79421e61de3d.png",
                "http://api.yfdmcw.com/uploads/products/2019-08-07/3/82086a2f61993b145d9fcdb410b89ffa.png",
                "http://api.yfdmcw.com/uploads/products/2019-08-07/3/b158a7e92a75f2152256fe0fe3816610.png",
                "http://api.yfdmcw.com/uploads/products/1168/icon/3/2054b39918698f4b9935bcc198620f07.png"
              ]
            },
            {
              name: "家居百货",
              list: [
                "http://api.yfdmcw.com/uploads/products/2019-09-30/3/2d9fb8f3c4476c9902004ba32c290c81.jpg",
                "http://api.yfdmcw.com/uploads/products/2019-09-27/3/df5da8c974b8dbb1b4081e4cf148a47a.jpg",
                "http://api.yfdmcw.com/uploads/products/2019-08-02/3/8f1cc675b59c1b7de615c7ca33945400.jpg",
                "http://api.yfdmcw.com/uploads/products/726/icon/3/c8a2085328094e934dbfad0983f48e11.jpg"
              ]
            }
          ]
        }
      ]
    };
  },
  created() {
    this.rowList.forEach((r, i) => {
      r.spList = r.typeList[0].list;
      this.dcType[i] = 0;
    });
  },
  methods: {
    onTypeMouserOver(i, j) {
      // console.log(i,j);
      let r = this.rowList[i];
      r.spList = r.typeList[j].list;
      this.dcType[i] = j;
    }
  }
};
</script>

<style lang="scss" scoped>
$height: 470px;
.c-top {
  padding-top: 10px;
}
.menu,
.pic1,
.pic2,
.pic3 {
  height: $height;
  width: 100%;
}
.pic1 {
  padding-left: 0px;
  padding-right: 5px;
}
.pic2 {
  padding-left: 5px;
  padding-right: 5px;
}
.pic3 {
  padding-left: 5px;
}
.piclist {
  margin: 5px -5px 0 -5px;
  .pic {
    float: left;
    padding: 5px;
    width: 25%;
  }
}
.rowsp {
  margin-top: 20px;
  .xbt {
    float: left;
    margin-top: 5px;
    margin-right: 13px;
    color: #888;
  }
  .xbt:hover {
    cursor: pointer;
    color: purple;
  }
  .txt-purple {
    color: purple;
  }
}
</style>